<!--点击下箭头，选择按钮-->
<template>
    <ul class="loadClass">
        <img src="@img/down.png" alt="" @click="loading('up')" />
        <li v-for="(item, index) in list" :key="index" :class="{ active: idx === index }">
            <el-button type="primary" size="small" @click="changeBtn(item, index)">{{ item.name }}</el-button>
        </li>
        <img src="@img/down.png" alt="" @click="loading('down')" />
    </ul>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const idx = ref(0);
interface Props {
    /** 循环列表 */
    list: any[];
}
const props = withDefaults(defineProps<Props>(), {
    list: () => []
});
const emit = defineEmits<{
    (e: 'listItem', data: object): void;
}>();
/** 按钮事件 */
const changeBtn = (item: object, index: number) => {
    idx.value = index;
    emit('listItem', item);
};
/** 移动事件 */
const loading = (type: string) => {
    if (type === 'down' && idx.value + 1 < props.list.length) {
        idx.value++;
    } else if (type === 'up' && idx.value > 0) {
        idx.value--;
    }
    emit('listItem', props.list[idx.value]);
};
</script>
<style scoped lang="scss">
.loadClass {
    width: 64px;
    text-align: center;
    li.active {
        ::v-deep(.el-button) {
            width: 64px;
            background: #1b93fb;
        }
    }
    img {
        display: inline-block;
        width: 16px;
        height: 10px;
        cursor: pointer;
        &:first-of-type {
            transform: rotate(180deg);
            margin-bottom: 1px;
        }
    }
    li {
        margin-bottom: 6px;
        &:last-of-type {
            margin-bottom: 0px;
        }
    }
    ::v-deep(.el-button) {
        width: 64px;
        font-size: 12px;
        background: rgba($color: #1b93fb, $alpha: 0.2);
        border: none;
    }
}
</style>
